<template>
  <el-menu
    :class="[menuMarginCss]"
    class="el-menu-vertical-demo"
    :collapse="toggle"
    background-color="#545c64"
    text-color="#fff"
    @select="onMenuSelect"
    active-text-color="#ffd04b"
    :collapse-transition="true"
  >
    <template v-for="item in menus" >
      <el-submenu v-if="item.hasSubMenu === true" :index="item.index" :key="item.index">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{item.title}}</span>
        </template>
        <div v-for="item2 in item.child" :key="item2.index">
          <el-submenu v-if="item2.hasSubMenu === true" :index="item2.index">
            <span slot="title">{{item2.title}}</span>
            <div v-for="item3 in item2.child" :key="item3.index">
              <el-submenu v-if="item3.hasSubMenu === true" :index="item3.index">
                <span slot="title">{{item3.title}}</span>
              </el-submenu>
              <el-menu-item v-if="item3.hasSubMenu === false" :index="item3.index">
                <span slot="title">{{item3.title}}</span>
              </el-menu-item>
            </div>
          </el-submenu>
          <el-menu-item v-if="item2.hasSubMenu === false" :index="item2.index">
            <span slot="title">{{item2.title}}</span>
          </el-menu-item>
        </div>
      </el-submenu>

      <el-menu-item v-if="item.hasSubMenu === false" :index="item.index" :key="item.index">
        <i :class="item.icon"></i>
        <span slot="title">{{item.title}}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuMarginCss: "menuMarginOpen"
    };
  },
  watch: {
    toggle(val) {
      // alert(val+typeof(val));
      if (val === true) {
        this.menuMarginCss = "menuMarginClose";
      } else {
        this.menuMarginCss = "menuMarginOpen";
      }
    }
  },
  props: {
    menus: Array,
    toggle: Boolean
  },
  methods: {
    handleMenuOpen(key, keyPath) {
      alert("345");
      this.menuMarginCss = "menuMarginOpen";
    },
    handleMenuClose() {
      
    },
    onMenuSelect(selectIndex,indexArray){
    
      this.$emit("menuSelect",selectIndex,indexArray);
    }
  }
};
</script>

<style lang="css" scoped>
.menuMarginOpen {
  margin-left: 0px;
}
.menuMarginClose {
  margin-left: 0px;
}
</style>